<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />
<meta content=”telephone=no” name=”format-detection” />
    <title>Love Qibao</title>
	<style> 
body{ text-align:center} 
.div{ margin:0 auto; width:150px; height:100px; border:1px solid #F00} 
#thenceThen{font-size:2em;}
div img{

　　max-width:100%;

　　height:auto;

}

</style> 
    <script type="text/javascript">
function draw(id)
    {
        var canvas=document.getElementById(id);
        if(canvas==null)
        return false;
        var ctx=canvas.getContext('2d');
    ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,22,62.5,22,55);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,128,55);
ctx.bezierCurveTo(128,55,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
gradient.addColorStop(0,"rgba(244,28,285,0.5)");
gradient.addColorStop(1,"rgba(255,255,255,1)");
ctx.fillStyle=gradient;
ctx.fill();
    }
	
	function calc(timespan){
 var date1=new Date(timespan);
 var totalSecs=(new Date()-date1)/1000;
 var days=Math.floor(totalSecs/3600/24);
 var hours=Math.floor((totalSecs-days*24*3600)/3600);
 var mins=Math.floor((totalSecs-days*24*3600-hours*3600)/60);
 var secs=Math.floor((totalSecs-days*24*3600-hours*3600-mins*60));
 document.getElementById("thenceThen").innerText="与七宝相识"+days+"天"+hours+"小时"+mins+"分"+secs+"秒";
}
var clock;
window.onload=function(){
 clock=self.setInterval("calc('2017/02/05')", 500);
}


    </script>
  </head>
  <body>
    <div><canvas id="myCanvas" width=150 height=150></canvas><div>
	<div id="thenceThen"></div>
	<br><br>
	<div style="width:300px;height:500px;margin:0 auto"><img src='1.jpg' style="width: 100%"></img></div>
  </body>
  <script type="text/javascript">
 
  draw("myCanvas");
  </script>
</html>